import React, { Component } from 'react';
let {Provider,Consumer} =React.createContext()
class Calculator extends Component {
    state={
        num:666
    }
    handleAdd=()=>{
        console.log("执行了加法")
        let num=this.state.num
        num++
        this.setState({
            num:num
        })
    }
    handleSub=()=>{
        console.log("执行了减法")
        let num=this.state.num
        num--
        this.setState({
            num:num
        })
    }
    render() {
        return (
            <Provider value={{
                num:this.state.num,
                handleAdd:this.handleAdd,
                handleSub:this.handleSub
            }}>
               <Calcbox>
                   <Calcbtn type="add"></Calcbtn>
                   {this.state.num}
                   <Calcbtn type="sub"></Calcbtn>
                </Calcbox> 
            </Provider>
        );
    }
}
class Calcbox extends Component{
    render(){
        return(
            <div>
                {this.props.children}
            </div>
        )
    }
}
class Calcbtn extends Component{
    render(){
        return(
            <Consumer>
                {({handleAdd,handleSub}) => {
                    let type=this.props.type==="add"?"+":"-"
                    return (
                    <button onClick={this.props.type==="add"?handleAdd:handleSub}>
                        {type}
                    </button>
                    )
                }}
            </Consumer>
        )   
    }
}
/* class Add extends Component{
    render (){
        return (
            <Consumer>
               {
                   ({handleAdd})=>{
                       return  <button onClick={handleAdd}>+</button> 
                   }
               }
            </Consumer>
        )
    }
}
class Sub extends Component{
    render(){
         return(
             <Consumer>
                {
                    ({handleSub}) => {
                        return  <button onClick={handleSub}>-</button>
                    }
                }
             </Consumer>
         )
    }
}
 */

export default Calculator;